<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div v-if="crud.props.searchToggle">
        <!-- 搜索 -->
        <label class="el-form-item-label">容器编码</label>
        <el-input v-model.trim="query.containerCode" clearable placeholder="容器编码" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" @clear="crud.toQuery" />
        <label class="el-form-item-label">容器描述</label>
        <el-input v-model="query.containerDescription" clearable placeholder="容器描述" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" @clear="crud.toQuery" />
        <label class="el-form-item-label">客户</label>
        <el-input v-model.trim="query.receiverName" clearable placeholder="客户" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" @clear="crud.toQuery" />
        <label class="el-form-item-label">母托编码</label>
        <el-input v-model.trim="query.palletCode" clearable placeholder="母托编码" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" @clear="crud.toQuery" />
        <rrOperation :crud="crud" />
      </div>
      <div>
        <crudOperation :permission="permission">
          <el-button slot="right" type="primary" size="mini" class="filter-item" :disabled="submitList.length === 0" icon="el-icon-box" plain @click="moveButton">移库</el-button>
        </crudOperation>
      </div>
      <!--表单组件-->
      <el-dialog :close-on-click-modal="false" :visible.sync="visible" width="500px" title="移库" @close="cancel">
        <div style="display: flex;flex-direction: column;gap: 10px;width: 70%;margin: 0 auto;">
          <el-button type="primary" :disabled="btn.canopy" :loading="btn.vertical" size="medium" style="font-size: medium;" plain @click="submitMove('立库')">移库至立库</el-button>
          <el-button type="success" :disabled="btn.vertical" :loading="btn.canopy" size="medium" style="font-size: medium;" plain @click="submitMove('雨棚')">出库至雨棚区</el-button>
        </div>
      </el-dialog>
      <!--表格渲染-->
      <el-table ref="table" v-loading="crud.loading" :data="crud.data" size="small" style="width: 100%;" @select-all="handlerSelectAll" @select="handlerSelect">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="containerCode" label="容器编号" />
        <el-table-column prop="containerDescription" label="容器描述" />
        <el-table-column prop="containerQty" label="容器数量" />
        <el-table-column prop="receiverName" label="客户" />
        <el-table-column prop="status" label="状态" />
        <el-table-column prop="createTime" label="创建时间" />
        <el-table-column prop="createName" label="创建人" />
        <el-table-column prop="inboundTime" label="入库时间" />
        <el-table-column prop="area" label="库区" />
        <el-table-column prop="storageId" label="储位id" />
        <el-table-column prop="storageCode" label="储位编码" />
        <el-table-column prop="parentPalletCode" label="母托编码" />
      </el-table>
      <!--分页组件-->
      <pagination />
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import crudContainer from '@/api/work/containerInventory'
import { containerMoveAPI } from '@/api/work/containerInventory'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
// import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'

const defaultForm = { id: null, containerType: null, containerQty: null, palletCode: null, status: null, createTime: null, createName: null, updateTime: null, updateName: null, containerCode: null, inboundTime: null, containerDescription: null, area: null, storageId: null }
export default {
  name: 'ContainerInventory',
  components: { pagination, rrOperation, crudOperation },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  cruds() {
    return CRUD({ title: 'container', url: 'api/container', idField: 'id', sort: 'id,desc', crudMethod: { ...crudContainer },
      queryOnPresenterCreated: true,
      optShow: {
        add: false,
        del: false,
        edit: false,
        reset: true,
        download: true
      }
    })
  },
  data() {
    return {
      permission: {
        add: ['admin', 'container:add', 'otherUser'],
        edit: ['admin', 'container:edit', 'otherUser'],
        del: ['admin', 'container:del', 'otherUser']
      },
      rules: {
      },
      queryTypeOptions: [
        { key: 'containerType', display_name: '容器类型' },
        { key: 'palletCode', display_name: '母托编码' },
        { key: 'status', display_name: '状态' }
      ],
      visible: false,
      form: {
        warehouse: ''
      },
      submitList: [],
      warehouse: [
        {
          value: '雨棚',
          label: '雨棚区'
        },
        {
          value: '立库',
          label: '立库区'
        }
      ],
      btn: {
        submitMove: false
      }
    }
  },
  computed: {
    ...mapGetters([
      'roles'
    ])
  },
  watch: {
    'query.current'(oldValue, newValue) {
      if (oldValue !== newValue) {
        this.submitList = []
      }
    }
  },
  methods: {
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      return true
    },
    moveButton() {
      this.visible = true
      this.submitList = this.submitList.map(item => {
        return item.id
      })
    },
    cancel() {
      this.visible = false
      this.submitList = []
      this.$refs.table.clearSelection()
    },
    handlerSelect(selection, row) {
      const existingIndex = this.submitList.findIndex(item => item.id === row.id)
      if (existingIndex === -1) {
        this.submitList.push(row)
      } else {
        this.submitList.splice(existingIndex, 1)
      }
    },
    handlerSelectAll(selection) {
      if (selection.length > 0) {
        this.submitList = selection
      } else {
        this.submitList = []
      }
    },
    async submitMove(val) {
      switch (val) {
        case '雨棚':
          this.btn.canopy = true
          break
        case '立库':
          this.btn.vertical = true
          break
      }
      const submitForm = {
        containerIdList: this.submitList,
        targetAreaType: val
      }
      try {
        const res = await containerMoveAPI(submitForm)
        if (res.result === 'OK') {
          this.$message.success(res.message)
          this.submitList = []
          this.$refs.table.clearSelection()
          this.crud.toQuery()
        } else {
          this.submitList = []
          this.$refs.table.clearSelection()
          return this.$message.warning(res.data)
        }
      } finally {
        this.btn.vertical = false
        this.btn.canopy = false
        this.visible = false
      }
    }
  }
}
</script>

<style scoped>

</style>
